<template>
  <div class="main-box">
    <div class="top-fixed-box">
      <img src="../assets/images/go.png" class="go" alt @click="handleGo" />
      <div class="top-fixed-go" :style="{opacity:opacity}">{{datas.title}}</div>
    </div>
    <div leave-class="top-box">
      <img :src="datas.images.small" class="top-pic" alt />
    </div>
    <div class="content-box">
      <p class="title">
        {{datas.title}}
        <span>2D</span>
      </p>
      <p class="type">{{datas.genres.join(' | ')}}</p>
      <p class="time">{{datas.pubdate}}上映</p>
      <p class="from">{{datas.pubdates[0]|getFrom()}} | {{datas.durations[0]}}</p>
      <p class="plot">{{datas.summary}}</p>
    </div>
    <div class="actors-box">
      <p class="actors-title"></p>
      <div class="actors">
        <div class="actor-box" v-for="(item,index) in datas.directors" :key="index">
          <img :src="item.avatars.small" class="pic" alt />
          <p class="actor-name">{{item.name}}</p>
          <p class="actor-rank">导演</p>
        </div>
        <div class="actor-box" v-for="(item,index) in datas.casts" :key="index">
          <img :src="item.avatars.small" class="pic" alt />
          <p class="actor-name">{{item.name}}</p>
          <p class="actor-rank">{{item.name_en}}</p>
        </div>
      </div>
    </div>
    <div class="stage-box">
      <p class="stage-top">
        <span>剧照</span>
        <span class="stage-more">全部></span>
      </p>
      <div class="stage-photos">
        <div class="photo-box" v-for="(item,index) in datas.photos" :key="index">
          <img :src="item.image" class="photo" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      id: "",
      datas: {},
      opacity: 0
    };
  },
  mounted() {
    var id = this.$route.query.id;
    var url = "https://douban-api.now.sh/v2/movie/subject/" + id;
    this.axios.get(url).then(res => {
      console.log(res);
      this.datas = res.data;
    });
    window.addEventListener("scroll", this.handleScroll);
  },
  filters: {
    getFrom(data) {
      var start = data.indexOf("(");
      var end = data.indexOf(")");
      return data.slice(start + 1, end);
    }
  },
  methods: {
    handleScroll() {
      var viewH = Math.floor(document.documentElement.scrollTop);

      if (viewH >= 200) {
        this.opacity = 1;
      } else {
        this.opacity = 0;
      }
    },
    handleGo(){
        this.$router.back()
    }
  }
};
</script>

<style scoped>
.main-box {
  display: flex;
  flex-direction: column;
  background: rgb(244, 244, 244);
  position: relative;
}
.actors-box {
  background: white;

  margin: 10px 0;
  box-sizing: border-box;
  padding: 15px;
}
.actors {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
}
.actor-box {
  width: 85px;
  height: 130px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}
.actor-name {
  font-size: 12px;
}
.actor-rank {
  font-size: 12px;
  color: #797d82;
}
.pic {
  width: 85px;
  height: 85px;
}
.actors-title {
  padding-bottom: 15px;
  font-size: 16px;
}
.stage-box {
  background: white;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.stage-top {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.stage-more {
  font-size: 13px;
  color: #797d82;
}
.stage-photos {
  overflow-x: auto;
  overflow-y: hidden;
  height: 115px;
  display: flex;
  flex-direction: row;
}
.photo-box {
  width: 150px;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
  box-sizing: border-box;
}
.photo {
  width: 150px;
}
.top-box {
  position: relative;
  height: 400px;
  box-sizing: border-box;
}
.top-pic {
  width: 100%;
  margin-top: -50%;
}
.content-box {
  padding: 15px;
  box-sizing: border-box;
  background: white;
}
.title {
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  margin-right: 7px;
}
.title > span {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
}
.type {
  font-size: 13px;
  color: #797d82;
  margin-top: 4px;
}
.time {
  font-size: 13px;
  color: #797d82;
  margin-top: 4px;
}
.from {
  font-size: 13px;
  color: #797d82;
  margin-top: 4px;
}
.plot {
  margin-top: 12px;
  font-size: 13px;
  color: #797d82;
}
.top-fixed-box {
  width: 100%;
  position: fixed;
  top: 0;
  font-size: 17px;
  height: 44px;
}
.top-fixed-go {
  width: 100%;
  height: 44px;
  position: relative;
  text-align: center;
  line-height: 44px;
  background: #fff;
}
.go {
  position: absolute;
  width: 30px;
  left: 10px;
  top: 6px;
  border-radius: 50%;
  z-index: 10;
}
</style>